<template>
  <div class="closed-management-home bg-background text-foreground p-6">
    <h2 class="text-2xl font-bold mb-6">封闭化管理首页</h2>

    <!-- 顶部统计卡片 -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-6 mb-6">
      <div v-for="(stat, index) in stats" :key="index" class="bg-card text-card-foreground p-4 rounded-lg shadow-sm">
        <div class="flex justify-between items-center">
          <div>
            <h3 class="text-sm font-medium text-muted-foreground">{{ stat.title }}</h3>
            <p class="text-2xl font-bold">{{ stat.value }}</p>
          </div>
          <component :is="stat.icon" class="w-8 h-8" :class="stat.iconColor" />
        </div>
      </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
      <!-- 常用功能 -->
      <div class="bg-card text-card-foreground p-6 rounded-lg shadow-sm">
        <h2 class="text-xl font-semibold mb-4">常用功能</h2>
        <div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
          <button v-for="(func, index) in commonFunctions" :key="index" 
                  class="flex flex-col items-center justify-center p-4 rounded-md transition-colors duration-200"
                  :class="func.bgColor">
            <component :is="func.icon" class="w-6 h-6 mb-2" />
            <span class="text-sm">{{ func.name }}</span>
          </button>
        </div>
      </div>

      <!-- 今日人流车流情况 -->
      <div class="lg:col-span-2 bg-card text-card-foreground p-6 rounded-lg shadow-sm">
        <h2 class="text-xl font-semibold mb-4">今日人流车流情况</h2>
        <div class="chart-container">
          <canvas ref="dailyFlowChartRef"></canvas>
        </div>
      </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
      <!-- 门禁/卡口视频监控 -->
      <div class="bg-card text-card-foreground p-6 rounded-lg shadow-sm">
        <h2 class="text-xl font-semibold mb-4">门禁/卡口视频监控</h2>
        <div class="grid grid-cols-2 gap-4">
          <div v-for="n in 4" :key="n" class="bg-muted aspect-video rounded-md"></div>
        </div>
      </div>

      <!-- 人流车流统计数据 -->
      <div class="lg:col-span-2 bg-card text-card-foreground p-6 rounded-lg shadow-sm">
        <h2 class="text-xl font-semibold mb-4">人流车流统计数据</h2>
        <div class="chart-container">
          <canvas ref="weeklyFlowChartRef"></canvas>
        </div>
      </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
      <!-- 黑名单统计 -->
      <div class="bg-card text-card-foreground p-6 rounded-lg shadow-sm">
        <h2 class="text-xl font-semibold mb-4">黑名单统计</h2>
        <div class="flex justify-around items-center">
          <div v-for="(stat, index) in blacklistStats" :key="index" class="text-center">
            <div class="relative inline-flex items-center justify-center">
              <svg class="w-32 h-32 transform -rotate-90">
                <circle
                  cx="64"
                  cy="64"
                  r="56"
                  stroke-width="8"
                  :stroke="stat.strokeColor"
                  fill="transparent"
                  class="opacity-20"
                />
                <circle
                  cx="64"
                  cy="64"
                  r="56"
                  stroke-width="8"
                  :stroke="stat.strokeColor"
                  fill="transparent"
                  :stroke-dasharray="2 * Math.PI * 56"
                  :stroke-dashoffset="2 * Math.PI * 56 * (1 - stat.percentage / 100)"
                  class="transition-all duration-1000 ease-in-out"
                />
              </svg>
              <span class="absolute text-2xl font-bold">{{ stat.value }}</span>
            </div>
            <p class="mt-2 text-lg font-medium">{{ stat.label }}</p>
            <p class="text-sm text-muted-foreground">占比 {{ stat.percentage.toFixed(1) }}%</p>
          </div>
        </div>
      </div>

      <!-- 设备在线状态 -->
      <div class="bg-card text-card-foreground p-6 rounded-lg shadow-sm">
        <h2 class="text-xl font-semibold mb-4">设备在线状态</h2>
        <ul class="space-y-4">
          <li v-for="device in deviceStatus" :key="device.name" class="flex justify-between items-center pb-2 border-b border-border last:border-0">
            <span class="text-sm">{{ device.name }}</span>
            <div class="text-right">
              <span class="text-lg font-bold">{{ device.count }}</span>
              <p class="text-xs text-muted-foreground">{{ device.status }}</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, computed } from 'vue'
import { Chart, registerables } from 'chart.js'
import { 
  User as UserIcon, 
  Truck as TruckIcon, 
  AlertTriangle as ExclamationTriangleIcon, 
  LayoutGrid as SquaresPlusIcon,
  FileText as DocumentTextIcon,
  Ban as NoSymbolIcon,
  Users as UserGroupIcon,
  ClipboardCheck as ClipboardDocumentCheckIcon,
  ShieldCheck as ShieldCheckIcon
} from 'lucide-vue-next'

Chart.register(...registerables)

const stats = ref([
  { title: '人员入园申请数', value: 10, icon: UserIcon, iconColor: 'text-green-500' },
  { title: '车辆入园申请数', value: 10, icon: TruckIcon, iconColor: 'text-blue-500' },
  { title: '危化运输车入园预约数', value: 10, icon: ExclamationTriangleIcon, iconColor: 'text-red-500' },
  { title: '普通车辆停车位', value: '10/100', icon: SquaresPlusIcon, iconColor: 'text-blue-500' },
  { title: '危化运输车停车位', value: '10/100', icon: SquaresPlusIcon, iconColor: 'text-red-500' },
])

const commonFunctions = ref([
  { name: '门禁卡口管理', icon: DocumentTextIcon, bgColor: 'bg-primary/10 text-primary hover:bg-primary/20' },
  { name: '人员入园申请', icon: UserIcon, bgColor: 'bg-green-500/10 text-green-500 hover:bg-green-500/20' },
  { name: '车辆入园申请', icon: TruckIcon, bgColor: 'bg-blue-500/10 text-blue-500 hover:bg-blue-500/20' },
  { name: '危化运输车预约', icon: ExclamationTriangleIcon, bgColor: 'bg-red-500/10 text-red-500 hover:bg-red-500/20' },
  { name: '黑名单管理', icon: NoSymbolIcon, bgColor: 'bg-yellow-500/10 text-yellow-500 hover:bg-yellow-500/20' },
  { name: '人员入园审核', icon: UserGroupIcon, bgColor: 'bg-purple-500/10 text-purple-500 hover:bg-purple-500/20' },
  { name: '车辆入园审核', icon: ClipboardDocumentCheckIcon, bgColor: 'bg-indigo-500/10 text-indigo-500 hover:bg-indigo-500/20' },
  { name: '危化运输车审核', icon: ShieldCheckIcon, bgColor: 'bg-pink-500/10 text-pink-500 hover:bg-pink-500/20' },
])

const dailyFlowChartRef = ref(null)
const weeklyFlowChartRef = ref(null)
let dailyFlowChart = null
let weeklyFlowChart = null

const chartOptions = {
  responsive: true,
  maintainAspectRatio: false,
  scales: {
    x: { stacked: true },
    y: { 
      stacked: true, 
      beginAtZero: true,
      ticks: {
        callback: function(value) {
          return value + '人';
        }
      }
    }
  },
  plugins: {
    legend: { position: 'top' },
    title: { display: false }
  }
}

const dailyFlowData = {
  labels: ['3:00', '6:00', '9:00', '12:00', '15:00', '18:00', '21:00', '24:00'],
  datasets: [
    {
      label: '车辆',
      data: [27, 19, 30, 15, 30, 15, 18, 26],
      backgroundColor: 'rgba(59, 130, 246, 0.5)',
    },
    {
      label: '人员',
      data: [40, 30, 45, 22, 45, 22, 27, 40],
      backgroundColor: 'rgba(245, 158, 11, 0.5)',
    }
  ]
}

const weeklyFlowData = {
  labels: ['0401', '0402', '0403', '0404', '0405', '0406', '0407'],
  datasets: [
    {
      label: '车辆',
      data: [12, 28, 32, 37, 41, 44, 35],
      borderColor: 'rgb(59, 130, 246)',
      tension: 0.1,
      fill: false
    },
    {
      label: '人员',
      data: [22, 38, 42, 47, 51, 54, 42],
      borderColor: 'rgb(245, 158, 11)',
      tension: 0.1,
      fill: false
    }
  ]
}

const totalBlacklist = computed(() => blacklistStats.value.reduce((sum, stat) => sum + stat.value, 0))

const blacklistStats = ref([
  { 
    label: '人员', 
    value: 1089, 
    strokeColor: 'var(--primary)', 
    percentage: 0 // 将在计算属性中更新
  },
  { 
    label: '车辆', 
    value: 1367, 
    strokeColor: 'var(--secondary)', 
    percentage: 0 // 将在计算属性中更新
  },
])

// 计算百分比
blacklistStats.value.forEach(stat => {
  stat.percentage = (stat.value / totalBlacklist.value) * 100
})

const deviceStatus = ref([
  { name: '监控摄像头', count: 78, status: '在线率: 98.00%' },
  { name: '定位设备', count: 7, status: '在线率: 98.00%' },
  { name: '气体感知设备', count: 7, status: '在线率: 98.00%' },
  { name: '车辆道闸', count: 7, status: '在线率: 98.00%' },
])

const createChart = (ctx, type, data) => {
  return new Chart(ctx, {
    type,
    data,
    options: chartOptions
  })
}

const resizeChart = () => {
  if (dailyFlowChart) dailyFlowChart.resize()
  if (weeklyFlowChart) weeklyFlowChart.resize()
}

onMounted(() => {
  if (dailyFlowChartRef.value) {
    dailyFlowChart = createChart(dailyFlowChartRef.value, 'bar', dailyFlowData)
  }

  if (weeklyFlowChartRef.value) {
    weeklyFlowChart = createChart(weeklyFlowChartRef.value, 'line', weeklyFlowData)
  }

  window.addEventListener('resize', resizeChart)
})

onUnmounted(() => {
  if (dailyFlowChart) {
    dailyFlowChart.destroy()
  }
  if (weeklyFlowChart) {
    weeklyFlowChart.destroy()
  }
  window.removeEventListener('resize', resizeChart)
})
</script>

<style scoped>
.chart-container {
  height: 300px; /* 或者其他适合你布局的固定高度 */
  width: 100%;
}

@keyframes fillAnimation {
  from {
    stroke-dashoffset: 352; /* 2 * Math.PI * 56 */
  }
  to {
    stroke-dashoffset: 0;
  }
}

.animate-fill {
  animation: fillAnimation 1s ease-out forwards;
}
</style>
